<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>差旅审批</span>
      </div>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <!-- 下拉框 -->
        <el-form-item label="申请人" prop="applicant">
          <el-select v-model="ruleForm.applicant" placeholder="请选择申请人" style="width: 100%;">
            <el-option  v-for="item in employeeSelect" :key="item.id" 
                    :label="item.account" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

      <!-- 日期 -->
        <el-form-item label="申请日期" prop="created">
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.created" style="width: 100%;"></el-date-picker>
        </el-form-item>

        <el-form-item label="出差天数" prop="travel_days">
        <el-input-number v-model="ruleForm.travel_days"  :min="1" :max="30" label="申请数量"></el-input-number>
        </el-form-item>

        <el-form-item label="报销金额" prop="money">
          <el-input type="type" placeholder="请输入报销金额"  prefix-icon="el-icon-search" 
                  v-model="ruleForm.money"></el-input>
        </el-form-item>

        <!-- 发票上传 -->
        <el-form-item label="上传发票" prop="bill">
          <el-upload
            class="upload-demo"
            action=""
            :before-upload="handleUpload"
            :http-request = "handleRequest"
            :on-exceed="handleExceed"
            :limit="1"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg图片文件，且不超过1MB</div>
          </el-upload>
          <!-- 
            action	必选参数，上传的地址
            before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
            http-request	覆盖默认的上传行为，可以自定义上传的实现
            limit	最大允许上传个数
            on-exceed	文件超出个数限制时的钩子
            list-type	文件列表的类型	string	text/picture/picture-card	text
           -->
        </el-form-item>

        <!-- 出差城市 -->
        <el-form-item label="出差城市" prop="destination">
          <el-cascader style="width: 100%;"
            v-model="ruleForm.destination"
            :options="AreaData"></el-cascader>
        </el-form-item>

        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即申请</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {userEmployee,getArea,travelCreate} from '@/api/http' 
export default {
  data(){
    return {
      employeeSelect:[], //查询所有员工下拉数据
      AreaData:[],//省市数据(出差城市)
      ruleForm:{
        applicant:'',
        money:'',
        travel_days:'',
        destination:[], //destination:['湖北省','武汉市'],
        created:'',
        bill:'', //发票上传
      },
      rules:{  //校验
        applicant: [
            { required: true, message: '请选择申请人', trigger: 'blur' }
        ],
        money: [
          { required: true, message: '请输入出差金额', trigger: 'change' }
        ],
        created: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        travel_days: [
          { required: true, message: '请输入出差天数', trigger: 'change' }
        ],
        destination: [
          { required: true, message: '请选择出差城市' ,trigger: 'change'}
        ],
        bill: [
          { required: true, message: '发票上传不能为空' }
        ],
      }
    }
  },
  mounted(){
    this.getEmployee();
    this.getAreaData();
  },
  methods:{
    getEmployee(){  //查询所有员工
      userEmployee().then(res=>{
        let {code,data} = res.data;
        if(code==20000){
          this.employeeSelect = data;
        }
      })
    },
    //省市数据
    getAreaData(){  
      getArea().then(res=>{
        let {code,data} = res.data;
        if(code==20000){
          //AreaID  每个区域ID
          //AreaLevel 等级  2表示省级数据   3表示市级数据
          //ParentId 父级ID 比如武汉市 区域ID 5,父ID2
          let provinceData = data.filter(v=>v.AreaLevel ==2).map(v=>({
            value:v.AreaName,
            label:v.AreaName,
            AreaID:v.AreaID,
            AreaLevel:v.AreaLevel,
            ParentId:v.ParentId
          })); //省数据
          let cityData = data.filter(v=>v.AreaLevel ==3).map(v=>({
            value:v.AreaName,
            label:v.AreaName,
            AreaID:v.AreaID,
            AreaLevel:v.AreaLevel,
            ParentId:v.ParentId
          })); //市数据
          //市数据追加到省数据
          provinceData.forEach(item=>{item.children = cityData.filter(v=>v.ParentId==item.AreaID)});
          this.AreaData = provinceData;
        }
      })
    },
    //限制上传的图片格式及大小,上传的文件格式是jgp,上传大小1MB
    handleUpload(file){
      const isJPG = file.type == 'image/jpeg';
      const isLt1M = file.size /1024 /1024 < 1;
      if(!isJPG){
        this.$message.error("上传图片格式只能是jpg!")
      };
      if(!isLt1M){
         this.$message.error("上传图片大小不能超过1MB")
      };
      return isJPG && isLt1M;
    },
    //覆盖默认的上传行为，可以自定义上传的实现
    handleRequest(params){
      this.ruleForm.bill = params.file;
    },
    //文件超出个数限制时的钩子
    handleExceed(){
      this.$notify({
            title: '最大上传数是1',
            message: '最大上传数是1',
            duration: 2000,
            type: 'tip'
          });
    },
    submitForm(formName){  //提交数据
       let {bill,destination} = this.ruleForm;
       let formdata = new FormData();
       Object.keys(this.ruleForm).forEach(item=>{
         formdata.append(item,this.ruleForm[item]);
       });
       formdata.append('destination',destination.join('')); //类型转换
       if(bill){
         formdata.append(bill,bill);
       };
      this.$refs[formName].validate((valid) => {
          if (valid) {
           travelCreate(formdata).then(res=>{
              let {code} = res.data;
              if(code==20000){
                this.$router.push("/approvalManage/travelManage") //跳转‘申请管理-差旅审批’
              }
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
    }
  }

      // options:[
      //   {
      //     value:1,
      //     label:'北京',
      //     children:[
      //       {value:2,label:'北京'}
      //     ]
      //   },
      //   {
      //     value:3,
      //     label:'湖北省',
      //     children:[
      //       {value:4,label:'武汉市'},
      //       {value:5,label:'宜昌市'},
      //     ]
      //   },
      //   {
      //     value:6,
      //     label:'江苏省',
      //     children:[
      //       {value:7,label:'南京市'},
      //       {value:8,label:'无锡市'},
      //     ]
      //   },
      // ]

  // var arr = [
  //   {AreaID: 1,AreaLevel: 2,AreaName: "北京",ParentId: 1},
  //   {AreaID: 2,AreaLevel: 2,AreaName: "湖北省",ParentId: 1},
  //   {AreaID: 3,AreaLevel: 2,AreaName: "江苏省",ParentId: 1},
  //   {AreaID: 4,AreaLevel: 2,AreaName: "福建省",ParentId: 1},
  //   {AreaID: 5,AreaLevel: 3,AreaName: "武汉市",ParentId: 2},
  //   {AreaID: 6,AreaLevel: 3,AreaName: "宜昌市",ParentId: 2},
  //   {AreaID: 7,AreaLevel: 3,AreaName: "南京市",ParentId: 3},
  //   {AreaID: 8,AreaLevel: 3,AreaName: "无锡市",ParentId: 3},
  //   {AreaID: 9,AreaLevel: 3,AreaName: "厦门市",ParentId: 4},
  //   {AreaID: 10,AreaLevel: 3,AreaName: "福州市",ParentId: 4},
  // ];
  // //AreaID  每个区域ID
  // //AreaLevel 等级  2表示省级数据   3表示市级数据
  // //ParentId 父级ID 比如武汉市 区域ID 5,父ID2
  // var a2 = arr.filter(v=>v.AreaLevel ==2).map(v=>({
  //   value:v.AreaName,
  //   label:v.AreaName,
  //   AreaID:v.AreaID,
  //   AreaLevel:v.AreaLevel,
  //   ParentId:v.ParentId
  // })); //省数据
  // var a3 = arr.filter(v=>v.AreaLevel ==3).map(v=>({
  //   value:v.AreaName,
  //   label:v.AreaName,
  //   AreaID:v.AreaID,
  //   AreaLevel:v.AreaLevel,
  //   ParentId:v.ParentId
  // })); //市数据
  // //市数据追加到省数据
  // a2.forEach(item=>{item.children = a3.filter(v=>v.ParentId==item.AreaID)});
  // console.log(a2);

}
</script>


